<template>
  <div class="pageleft bg_fff flexcolumn h_full mr-12">
    <div class="plr-12 tag_header f-14 c_text2 fw-6">
      标签
    </div>
    <div class="left_body">
      <el-form
        ref="queryParams"
        :model="queryParams"
        size="small"
        :inline="true"
        class="searchbox p-10 w_full"
      >
        <el-form-item label="" prop="keyword" class="mb-0 mr-0 w_full">
          <el-input
            placeholder="搜群名称/群主/群管"
            v-model="queryParams.keyword"
            clearable
            @keyup.enter.native="handleQuery"
            style="width:258px"
          />
        </el-form-item>
      </el-form>
      <div class="list_box p-8">
        <!-- <div
          class="role_item commhover flexbetween f-14"
          :class="{ active: active == -2 }"
          @click="handleItem({ id: -2 })"
        >
          <div class="flex aligncenter w_full">
            <svg-icon class-name="mr-26 f-14" icon-class="icontent" />
            <div class="role-title c_text f-13">全部话术</div>
          </div>
        </div>
        <div
          class="role_item commhover flexbetween f-14"
          :class="{ active: active == -1 }"
          @click="handleItem({ id: -1 })"
        >
          <div class="flex aligncenter w_full">
            <svg-icon class-name="mr-26 f-14 c_ccc" icon-class="sort" />
            <div class="role-title c_text f-13">默认分组</div>
          </div>
        </div> -->
        <el-tree
          v-loading="loading"
          ref="draggtree"
          :data="groupList"
          :props="defaultProps"
          node-key="id"
          default-expand-all
          @node-drag-start="handleDragStart"
          @node-drop="handleDrop"
          :draggable="true"
          :allow-drop="allowDrop"
          :allow-drag="allowDrag"
          class="dragtree"
        >
          <div
            class="role_item commhover flexbetween f-14"
            slot-scope="{ node, data }"
            :class="{ active: active == data.id }"
            @click="handleItem(data,node)"
          >
            <div class="flex aligncenter w_full">
              <svg-icon class-name="mr-26 draggericon f-14 c_text2" icon-class="sort" />
              <!-- <svg-icon class-name="mr-26 draggericon f-12" icon-class="ilist" /> -->
              
              <div class="role-title c_text2 f-13">
                <svg-icon v-if="node.level==1" icon-class='i_file' class-name='filename mr-3' style="color:#b7b7b7" />
                {{ data.groupName }}
                <span v-if="node.level!==1" class="c_text3 f-12">（3）</span>
              </div>
            </div>
          </div>
        </el-tree>
      </div>
    </div>
    <el-dialog
      :title="title"
      :visible.sync="open"
      width="500px"
      :close-on-click-modal="false"
      :before-close="handleClose"
    >
      <el-form :model="form" :rules="rules" ref="form" label-width="100px">
        <el-form-item label="分组名称：" prop="groupName">
          <el-input
            v-model="form.groupName"
            size="small"
            maxlength="10"
            placeholder="请输入分组名称，不超过10个字"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="handleClose">取 消</el-button>
        <el-button
          size="small"
          type="primary"
          :loading="subloading"
          @click="handleSubmit"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  scriptGroupList,
  addScriptGroup,
  delScriptGroup,
  updateScriptGroup,
} from "@/api/market/reply";
export default {
  data() {
    return {
      groupList: [
        // { name: "管理员", id: 1 },
        // { name: "成员", id: 2 },
      ],
      queryParams: {
        pageSize: 9999,
        pageNum: 1,
        repoType: 1,
      },
      loading: false,
      draggingNode: null,
      defaultProps: {
        children: "children",
        label: "groupName",
      },
      active: -2, //默认为全部
      title: "",
      open: false,
      form: {
        id: undefined,
        parentGroupId: -1,
        groupName: "",
        repoType: "",
      },
      rules: {
        groupName: [
          { required: true, message: "请输入角色名称", trigger: "blur" },
        ],
      },
      subloading: false,
    };
  },
  props: {
    repoType: {
      require: true,
      default: 1,
    },
  },
  created() {
    this.queryParams.repoType = this.repoType;
    this.form.repoType = this.repoType;
    this.getScriptGroupList();
  },
  methods: {
    getScriptGroupList() {
      this.loading = true;
      scriptGroupList(this.queryParams)
        .then((res) => {
          this.groupList = this.handleTree(res.rows, "id", "parentGroupId");
          this.loading = false;
          this.handleItem({ id: -2 });
          console.log("this.loadingthen：", this.loading, this.groupList);
        })
        .catch(() => {
          this.loading = false;
          console.log("this.loadingcatch：", this.loading);
        });
    },

    handleDragStart(node, ev) {
      console.log("drag start", node);
      this.draggingNode = node;
    },

    // 拖拽成功完成
    //draggingNode当前正拖拽的节点 dropNode目标节点|参考节点 dropType拖拽到参考节点的哪个位置 ev事件对象
    handleDrop(draggingNode, dropNode, dropType, ev) {
      console.log(draggingNode, dropNode, dropType, ev);
      if (this.draggingNode) {
        // 在此处可以根据业务需求，更新数据源或者调用API进行相应的操作
        console.log("拖放完成！");
        console.log("被拖动的节点：", this.draggingNode);
        console.log("接收拖放的节点：", dropNode);
      }
      this.draggingNode = null;
    },

    // 拖拽时判定目标节点能否被放置
    allowDrop(draggingNode, dropNode, type) {
      // console.log(draggingNode.level, dropNode.level);
      //注掉的是同级拖拽
      if (draggingNode.level === dropNode.level) {
        return type === "prev" || type === "next";
      } else {
        // 不同级进行处理
        return false;
      }
    },

    allowDrag(node) {
      return true;
    },

    handleItem(item,node={}) {
      
      if(node.level == 1) return
      console.log(item,node)
      this.active = item.id;
      // console.log(this.active, nodex)
      this.$emit("handleItem", item);
    },

    handleClose() {
      this.open = false;
      this.form.id = undefined;
      this.form.groupName = "";
      this.form.parentGroupId = -1;
    },

    handleSubmit() {
      this.$refs.form.validate((valid) => {
        if (!valid) return;
        this.subloading = true;
        if (this.form.id) {
          updateScriptGroup(this.form)
            .then((res) => {
              this.$message.success("编辑成功");
              this.handleClose();
              this.getScriptGroupList();
              this.subloading = false;
            })
            .catch(() => {
              this.subloading = false;
            });
        } else {
          addScriptGroup(this.form)
            .then(() => {
              this.$message.success("添加成功");
              this.handleClose();
              this.getScriptGroupList();
              this.subloading = false;
            })
            .catch((e) => {
              this.subloading = false;
            });
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.pageleft {
  width: 280px;
  border: 1px solid #e9e9e9;
}
.tag_header {
  height: 56px;
  line-height: 56px;
  border-bottom: 1px solid #e9e9e9;
}
.left_body {
  height: calc(100% - 85px);
  overflow-y: auto;
  // padding: 0 16px 16px;
}
.list_box{
  height: calc(100% - 108px);
}

.dragtree {
  ::v-deep .el-tree-node__content {
    height: 32px;
    border-radius: 4px;
    background-color: transparent;
    padding-left: 0!important;
    &:hover,
    &:visited,
    &:focus,
    &:active {
      background-color: transparent;
    }
  }
  ::v-deep .el-tree-node__expand-icon {
    position: absolute;
    left: 28px;
    color: rgba(0,0,0,0.85);
    z-index: 1;
  }
  ::v-deep .el-tree-node__expand-icon.is-leaf{
    color: transparent;
  }
  ::v-deep .el-tree-node__children{
    .role_item{
      padding-left: 30px;
    }
  }
  // ::v-deep .el-tree-node__children .el-tree-node:hover{
  //   border-radius: 4px;
  //   background-color: #f5f5f5;
  // }
  // ::v-deep .el-tree-node__children .is-current{
  //   border-radius: 4px;
  //   background-color: #d6e8ff;
  // }
}
.role_item {
  width: 100%;
  border-radius: 4px;
  position: relative;
  height: 32px;
  padding: 0 12px;
  padding-right: 6px;
  margin-bottom: 0;
  &:hover {
    background-color: #f5f5f5;
  }
  &.active {
    background-color: #d6e8ff;

    .role-title{
      color: #3070ff;
    }
  }
  

  
  // .roleicon {
  //   display: none;
  // }

  // &:hover .roleicon {
  //   display: inline;
  // }
}
.role-title {
  width: 72%;
  white-space: nowrap;
  word-break: break-all;
  word-wrap: break-word;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 5px;
  padding-left: 8px;
}
</style>